<template>
	<div class="wrap">
		<header-v></header-v>
		<section class="container">
			<div class="banner" :style="banner" v-for="item in banner_txt">
				<p>{{ item.txt1 }}<br /> {{ item.txt2 }}</p>
				<a href="javascript:;">{{ item.btn }}</a>
				<div class="mark"></div>
			</div>
			
			<div class="content">
				<div class="fn">
					<div v-for="item in fn">
						<img :src="item.src" alt="" />
						<p>{{ item.title }}</p>
						<p>{{ item.content }}</p>
					</div>
				</div>
				
				<div class="introduce" :style="introduce">
					<div v-for="item in introduce_con">
						<p>{{ item.title }}</p>
						<p>{{ item.content }}</p>
						<a href="javascript:;"> {{ item.btn }} </a>
					</div>
				</div>
				
				<div class="service">
					<div v-for="item in service_head" class="service_head">
						<p>{{ item.title }}</p>
						<p>{{ item.content }}</p>
					</div>
					<div v-for="item in service" class="service_con">
						<img :src="item.src" alt="" />
						<div>
							<p>{{ item.title }}</p>
							<p>{{ item.content }}</p>
						</div>
					</div>
				</div>
				
				<div class="picture">
					<div v-for="item in service_pic">
						<img :src="item" alt="" />
					</div>
				</div>
			</div>
		</section>
		<footer-v></footer-v>
	</div>
</template>

<script>
import header from './public/header'
import footer from './public/footer'
import banner from '../assets/banner.jpg'
import Icon from '../assets/Icon.png'
import bg from '../assets/bg.jpg'
import picture from '../assets/picture.jpg'
import picture_02 from '../assets/picture_2.jpg'
import picture_03 from '../assets/picture_3.jpg'
import picture_04 from '../assets/picture_4.jpg'
import picture_05 from '../assets/picture_5.jpg'
import picture_06 from '../assets/picture_6.jpg'

export default {
  components: {
  	headerV : header,
  	footerV : footer
  },
  data () {
    return {
    	banner : "background:url('"+ banner +"') center center no-repeat",
    	banner_txt : [
    		{  
    			txt1 : '一站式服务，千余家大型',
    			txt2 : '企业网页制作案例',
    			btn : '了解详情'
    		}
    	],
    	introduce : "background:url('"+ bg +"') center center no-repeat",
    	service_head : [
    		{
    			title : '服务特色',
    			content : '倾力打造的一个从网站建设、网网站运营管理到网站推广的自动化智能建站平台'
    		}
    	],
    	service : [
    		{
    			src : picture,
    			title : '丰富的模板',
    			content : '互联网创业瞬息万变'
    		},
    		{
    			src : picture_02,
    			title : '完善的售后',
    			content : '互联网创业瞬息万变'
    		},
    		{
    			src : picture_03,
    			title : '强大的团队',
    			content : '互联网创业瞬息万变'
    		},
    	],
    	service_pic : [
    		picture_04,picture_05,picture_06
    	],
    	introduce_con : [
    		{
    			title : '梦想源自微小起业',
    			content : '采用HTML5最新网页技术，网页界面可随不同屏幕尺寸自动伸缩，实现电脑、微信、手机网站跨平台显示，为终端用户浏览带来最佳用户体验',
    			btn : '了解详情'
    		}
    	],
    	fn : [
    		{
    			src : Icon,
    			title : '支持多终端跨屏展示',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术，拥有大气舒适的界面和众多精美模板'
    		},
    		{
    			src : Icon,
    			title : '功能强大的设计器',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术，拥有大气舒适的界面和众多精美模板'
    		},
    		{
    			src : Icon,
    			title : '强大的第三方功能',
    			content : '人靠衣装马靠鞍，一个炫酷的网站才配得上创业者的新潮创意。本公司采用HTML5最新技术，拥有大气舒适的界面和众多精美模板'
    		}
    	]
    }
  }
}
	
</script>


<style type="text/css" scoped>
	
	/* index.style */
	
	.banner{
		 position: relative; width: 100%; height: 4.06rem; background-size: 190% 100% !important;
	}
	.banner img{
		width:100%;
	}
	.banner p{
		color: #fff; font-size: 0.24rem; line-height: 0.4rem; padding-top: 0.9rem; padding-left: 0.2rem; position:relative; z-index: 9;
	}
	.banner a,.introduce a{
		display: block; font-size: 0.12rem; width: 1.5rem; margin-top: 0.12rem; position:relative; z-index: 9; margin-left: 0.2rem; height: 0.4rem; line-height: 0.4rem; color: rgb(59,59,59); background: #fff; border-radius: 0.13rem; text-align: center;
	}
	.banner .mark{
		width: 100%; height: 100%; top: 0; background-color: rgba(0,0,0,0.2); position: absolute;
	}
	
	.fn{
		margin: 0 auto; padding:0 0.24rem; text-align: center; padding-top: 0.62rem;
	}
	.fn div{
		padding-bottom: 0.62rem;
	}
	.fn img{
		width:1.08rem; height: 1.08rem;
	}
	.fn p:nth-of-type(1){
		line-height: 0.4rem; font-size: 0.18rem;
	}
	.fn p:nth-of-type(2){
		color: #808080; margin-top: 0.05rem;
	}
	
	.introduce{
		width: 100%; height: 3.33rem; background-size: 150% 3.33rem !important;
	}
	.introduce div{
		padding:0.56rem 0.305rem; color: #fff; text-align: center;
	}
	.introduce p:nth-of-type(1){
		font-size: 0.24rem; line-height: 0.5rem;
	}
	.introduce a{
		margin: 0.2rem 0.5rem;
	}
	
	.service{
		padding:0.4rem 0.36rem; background: #f5f5f5; padding-bottom: 0.01rem;
	}
	.service .service_head{
		margin-bottom: 0.6rem; text-align: center;
	}
	.service .service_head p:nth-of-type(1){
		font-size: 0.24rem; line-height: 0.5rem;
	}
	.service .service_head p:nth-of-type(2){
		color:#808080; font-size: 0.12rem;
	}
	.service .service_con div{
		width:99.3%; height: 0.82rem; border: 0.01rem solid #e2e2e2; margin-top: -0.06rem; background: #fff; text-align: center; margin-bottom: 0.5rem; padding-top: 0.1rem;
	}
	.service .service_con div p:nth-of-type(2){
		color: rgb(105,105,105);
	}
	.service .service_con div p:nth-of-type(1){
		font-size: 0.18rem; line-height: 0.35rem;
	}
	.picture{
		padding:0 0.4rem; padding-top: 0.3rem;background: #fff; 
	}
	.picture img{
		margin-bottom: 0.1rem; width: 100%;
	}
	.service img{
		width: 100%;
	}

</style>
